<script setup>
import { onMounted } from 'vue'
import { Empty } from 'vant'
import { useRoute, useRouter } from 'vue-router'
import Utility from '@/utils/utility'
import { storeToRefs } from 'pinia'
import { enumStore } from '@/store/enum'
import NOTHING_IMG from '@/assets/img/kyb_nothing.png'
const enum_store = enumStore()
const { enumDslInfo } = storeToRefs(enum_store)
const router = useRouter()
const route = useRoute()
defineProps({
  hasMore: {
    type: Boolean,
    default: false,
  },
  flowList: {
    type: Array,
    default: () => [],
  },
  contractDetail: {
    type: Object,
    default: () => ({
      contractInfo: {},
    }),
  },
  isDetail: {
    type: Boolean,
    default: false,
  },
})
function toDetail() {
  router.push(`/contract/detail/${route.params.id}/flow`)
}
onMounted(() => {
  // getFlowDetail()
})
</script>

<template>
  <div class="transaction__flow">
    <div class="transaction__flow-top">
      <div class="top__item">
        <div class="top__item-con">
          {{ $filters.formatMoney(contractDetail.receivedAmount) }}
          <span class="unit">{{ contractDetail.contractInfo.currency }}</span>
        </div>
        <div class="top__item-title">已收款</div>
      </div>
      <div class="top__item">
        <div class="top__item-con">
          {{ $filters.formatMoney(contractDetail.uncollectedAmount) }}
          <span>{{ contractDetail.contractInfo.currency }}</span>
        </div>
        <div class="top__item-title">剩余待收款</div>
      </div>
    </div>
    <div v-if="flowList.length" class="transaction__flow-bottom">
      <div class="title">已关联入款流水</div>
      <div v-for="item in flowList" class="flow__item" :key="item.inSerialNo">
        <div class="flow__item-left">
          <div class="row">
            <div class="row__label">流水号</div>
            <div
              class="row__value"
              @click="router.push(`/trade/enter/${item.inSerialNo}`)"
            >
              {{ item.inSerialNo }}
            </div>
          </div>
          <div class="row">
            <div class="row__label">关联金额</div>
            <div class="row__value">
              {{ $filters.formatMoney(item.relAmount) }}
              {{ item.currency }}
            </div>
          </div>
        </div>
        <div
          class="flow__item-status"
          :style="{
            color: item.auditStatus === 'Approved' ? '#999999' : '#FAA64E',
          }"
        >
          {{
            Utility.getTargetByValue(
              enumDslInfo.IncomingAuditStatus,
              item.auditStatus
            ).name
          }}
        </div>
      </div>
    </div>
    <Empty
      v-else
      :image="NOTHING_IMG"
      image-size="80"
      description="暂无关联流水"
    />
    <div v-if="!isDetail && hasMore" class="more__box">
      <div @click="toDetail" class="btn">更多关联流水</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.transaction__flow {
  width: 100%;
  background: #ffffff;
  border-radius: 8px;
  padding: 10px 12px 0;
  margin-bottom: 10px;
  .transaction__flow-top {
    display: flex;
    padding-bottom: 16px;
    border-bottom: 1px #eeeeee solid;
    .top__item {
      flex: 1;
      text-align: left;
      .top__item-con {
        font-size: 18px;
        font-weight: bold;
        color: #222222;
        line-height: 24px;
        span.unit {
          font-size: 16px;
          margin-left: 2px;
        }
      }
      .top__item-title {
        font-size: 12px;
        color: #999999;
        line-height: 16px;
        margin-top: 2px;
      }
    }
  }
  .transaction__flow-bottom {
    padding-top: 10px;
    .flow__item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 0;
      border-bottom: 1px #eeeeee solid;
      .row {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #999999;
        line-height: 18px;
        margin-bottom: 6px;
        .row__label {
          width: 80px;
          flex-shrink: 0;
        }
        &:last-of-type {
          margin-bottom: 0;
        }
      }
      &:last-of-type {
        border-bottom: 0;
      }
      .flow__item-status {
        font-size: 14px;
        color: #faa64e;
        line-height: 18px;
      }
    }
  }
  .more__box {
    border-top: 1px #eeeeee solid;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    .btn {
      width: 90px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 14px;
      border: 1px solid #cccccc;
      font-size: 12px;
      color: #999999;
    }
  }
}
:deep {
  .van-empty {
    padding-top: 0;
    .van-empty__description {
      margin-top: 0;
    }
  }
}
</style>
